<template>
	<div style="padding-left: 30px">
		<div>
			<el-button @click="addRow('textarea')">加文本块</el-button>
			<el-button @click="addRow('photo')">加图片块</el-button>
		</div>
		<div class="content-box">
			<div class="content-box-item" v-for="(item, index) in contents" :key="index">
				<div class="content-box-title">
					<div>字体颜色：<el-color-picker v-model="item.color" /></div>
					<div>背景颜色：<el-color-picker v-model="item.bcolor" /></div>
					<div>
						<el-popconfirm title="确定删除吗？" @confirm="delRow(index)">
							<template #reference>
								<el-button>删除</el-button>
							</template>
						</el-popconfirm>
					</div>
				</div>
				<el-input
					v-if="item.inputType === 'textarea'"
					type="textarea"
					:rows="3"
					style="width: 800px"
					placeholder="请输入内容"
					v-model="item.inputValue"
				/>
				<sc-upload-multiple v-if="item.inputType === 'photo'" ref="thumbs"
									v-model="item.inputValues" multiple/>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "goods-mobile-content",
	props: {
		contents: { type: Array, default: () => [] },
		baseUrl: { type: String, default: "" }
	},
	emits: ["update:contents"],
	data() {
		return {};
	},
	mounted() {

		setTimeout(() => {
			this.$refs.thumbs.map((item) => {
				item.setBaseUrl(this.baseUrl);
			});
		}, 1000);
	},
	methods: {
		addRow(_type) {
			let tmps = this.contents;
			tmps.push({
				inputType: _type,
				color: "",
				bcolor: "",
				inputValue: "",
				inputValues: ""
			});
			this.$emit("update:contents", tmps);
		},
		delRow(_index) {
			// eslint-disable-next-line vue/no-mutating-props
			let tmps = this.contents.splice(_index, 1);
			this.$emit("update:contents", tmps);
		}
	}
};
</script>

<style scoped lang="scss">
.content-box {
	margin-top: 30px;

	.content-box-item {
		margin-bottom: 5px;
		border: 1px solid #ccc;
		width: 1000px;

		.content-box-title {
			background-color: #a6d4e8;
			margin-bottom: 5px;
			display: flex;
			justify-content: space-between;
		}
	}
}
</style>
